/* 滚动条样式 */
/* 定义滚动条整体的宽度和轨道的背景颜色 */
::-webkit-scrollbar {
    width: 5px;
    /* 对于垂直滚动条的宽度 */
    height: 5px;
    /* 对于水平滚动条的高度，可选 */
}

/* 定义滚动条轨道的样式 */
::-webkit-scrollbar-track {
    background: rgba(153, 153, 153, 0.11);
    /* 轨道的颜色 */
    border-radius: 5px;
    /* 轨道的圆角 */
}

/* 定义滚动条滑块的样式 */
::-webkit-scrollbar-thumb {
    background: rgba(153, 153, 153, 0.11);
    /* 滑块的颜色 */
    border-radius: 5px;
    /* 滑块的圆角 */
    transition: background-color 0.2s ease;
    /* 可选：滑块颜色过渡效果 */
}

/* 当滑块不被鼠标悬停时的样式 */
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(153, 153, 153, 0.11);
    /* 非活动状态下的滑块颜色 */
}

/* Firefox 的滚动条轨道 */
scrollbar {
    -moz-appearance: none;
    /* 禁用默认样式 */
    width: 5px;
    /* 设置宽度 */
}

/* Firefox 的滚动条滑块 */
scrollbar-thumb {
    background: rgba(153, 153, 153, 0.11);
    /* 设置颜色 */
    border-radius: 5px;
    /* 圆角 */
    transition: background-color 0.2s ease;
    /* 过渡效果 */
}

/* 当滑块被hover时 */
scrollbar-thumb:hover {
    background: rgba(153, 153, 153, 0.11);
    /* 更深的颜色 */
}